@import "../../../Common/commonStyle.scss";


.wechat-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;

    &-title {
        color: rgba(255, 255, 255, 1);
        font-family: $PingFang-SC-Bold-fontFamily;
        font-weight: bold;
    }

    .wechat-form {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        background-image: url('../../../Assets/account/create@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .wechat-return {
            position: absolute;
            cursor: pointer;
        }

        &-title {
            font-family: $PingFang-SC-Medium-fontFamily;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        &-imgbox {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url('../../../Assets/account/wechartBd.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;


            .wechat-img-box {
                position: relative;
                z-index: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #fff;
            }

        }

        .wechat-mode {
            p {
                font-family: $PingFang-SC-Medium-fontFamily;
                color: rgba(255, 255, 255, 1);
            }
        }
    }
}


@media screen and(min-width: 1025px)and(max-width: 1440px) {
    .wechat-box {
        margin-left: -180px;

        &-title {
            font-size: 27px;
            line-height: 38px;
            text-shadow: 0px 2px 17px rgba(19, 21, 44, 0.52);
            margin-bottom: 17px !important;
        }

        .wechat-form {
            width: 360px;

            .wechat-return {
                left: 21px;
                top: 22px;
                width: 30px;
                height: 30px;

                &:last-of-type {
                    fill: rgba(100, 223, 222, .8);
                }
            }

            &-title {
                padding-top: 41px;
                margin-bottom: 18px;
                font-size: 15px;
                color: rgba(255, 255, 255, 1);
                line-height: 21px;
            }


            &-imgbox {
                width: 261px;
                height: 261px;

                &::before {
                    content: '';
                    position: absolute;
                    left: 20px;
                    bottom: 20px;
                    width: 64%;
                    height: 20%;
                    background-image: url('../../../Assets/account/btn-bg@2x.png');
                    z-index: 1;
                }

                .wechat-img-box {
                    width: 184px;
                    height: 184px;

                }

                .wechat-img {
                    width: 164px !important;
                    height: 164px !important;
                }
            }


            .wechat-mode {
                margin-top: 15px;
                margin-bottom: 50px;

                p {
                    display: inline-block;
                    width: 120px;
                    font-size: 11px;
                    font-weight: 400;
                    line-height: 15px;
                }



            }

        }
    }
}

@media screen and(min-width: 1441px)and(max-width: 1920px) {
    .wechat-box {
        margin-left: -240px;

        &-title {
            font-size: 36px;
            line-height: 50px;
            text-shadow: 0px 2px 22px rgba(19, 21, 44, 0.52);
            margin-bottom: 22px !important;

        }

        .wechat-form {
            width: 480px;

            .wechat-return {
                left: 30px;
                top: 30px;
                height: 40px;
                width: 40px;

                &:last-of-type {
                    fill: rgba(100, 223, 222, 1);
                }
            }

            &-title {
                padding-top: 54px;
                font-size: 20px;
                color: rgba(255, 255, 255, 1);
                line-height: 28px;
            }

            &-imgbox {
                width: 347px;
                height: 347px;

                &::before {
                    content: '';
                    position: absolute;
                    left: 25px;
                    bottom: 25px;
                    width: 64%;
                    height: 20%;
                    background-image: url('../../../Assets/account/btn-bg@2x.png');
                    z-index: 1;
                }

                .wechat-img-box {
                    width: 245px;
                    height: 245px;

                }

                .wechat-img {
                    width: 220px !important;
                    height: 220px !important;
                }
            }


            .wechat-mode {
                margin-top: 15px;
                margin-bottom: 50px;

                p {
                    display: inline-block;
                    width: 160px;
                    font-size: 16px;
                    line-height: 22px;
                    font-weight: 500;

                }


            }

        }

    }
}